<template>
  <div class="study-plan">
    <van-nav-bar
      title="内刊名称"
      placeholder
      fixed
      left-arrow
      @click-left="back"
    />
    <div class="study-plan__content">
      <div class="plan-detail">
        <div class="detail-img">
          <img src="@img/banner.png" alt="" />
        </div>
        <div class="detail-text">
          <div class="title">内刊的名称</div>
          <div class="qs">共2期</div>
          <div class="js">更新至333</div>
        </div>
      </div>
      <div class="pan-item">
        <van-row gutter="18">
          <van-col :span="8" v-for="i in 5" :key="i">
            <div class="pan-img">
              <img src="@img/banner.png" alt="" />
              <div class="pan-name">内刊名称</div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    back() {
      window.history.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.study-plan {
  min-height: 100vh;
  ::v-deep(.van-nav-bar__placeholder) {
    background: #ffffff;
  }
  &__content {
    border-top: 8px solid #f5f9fc;
    .pan-item {
      padding: 23px 19px;
      background: #ffffff;
      .pan-img {
        img {
          width: 100%;
          height: 150px;
        }
        .pan-name {
          padding: 8px 0 18px 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #676b6b;
          line-height: 20px;
          text-align: center;
          font-style: normal;
        }
      }
    }
    .plan-detail {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      margin: 0 19px;
      padding: 23px 0;
      display: flex;
      .detail-img {
        width: 100px;
        img {
          width: 100%;
          height: 150px;
        }
      }
      .detail-text {
        padding-left: 12px;
        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #272b2d;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          padding-top: 5px;
        }
        .qs {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #676b6b;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          padding-top: 8px;
        }
        .js {
          padding-top: 8px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #676b6b;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    height: 50px;
  }
}
</style>
